<template>
	<div class="main">
    <div>
      <h2>使用hooks：</h2>
    </div>
		<TogglePurple @change-purple="togglePurple" />

		<TextColor :textColor="textColor" @change-text-color="changeTextColor" />

		<CircleProperty :property="size" @change-property="changeSize">
			改变大小
		</CircleProperty>
		<CircleProperty :property="angle" @change-property="changeAngle">
			改变角度
		</CircleProperty>

		<Circle :circleClass="circleClass" :textColor="textColor" :circleSize="circleSize" :circleAngle="circleAngle" />
	</div>
</template>
<script setup lang="ts">
import TogglePurple from "../components/TogglePurple.vue";
import TextColor from "../components/TextColor.vue";
import Circle from "../components/Circle.vue";
import CircleProperty from "../components/CircleProperty.vue";
import { ref, computed } from "vue";

import { useTextColor } from "@views/hooks/circle/hooks/useTextColor.ts";
import { useTogglePurple } from "@views/hooks/circle/hooks/useTogglePurple.ts";
import { useSize } from "@views/hooks/circle/hooks/useSize.ts";
import { useAngle } from "@views/hooks/circle/hooks/useAngle.ts";
// Text
// const { textColor, changeTextColor } = useTextColor();
const { textColor, changeTextColor } = useTextColor();

// Toggle purple
const { isPurple, togglePurple, circleClass } = useTogglePurple();

// Size
const { size, circleSize, changeSize } = useSize();

// Angle
const { angle, circleAngle, changeAngle } = useAngle();
</script>

<style scoped>
body {
	font-size: 20px;
	font-family: sans-serif;
}

label {
	margin-bottom: 20px;
	font-size: 20px;
	display: block;
}

input[type="number"] {
	display: block;
	font-size: 20px;
	margin-bottom: 20px;
}
</style>
